<template>
  <div>
    <!-- 第一个Child组件 -->
    <Child>
      <!-- 默认插槽 直接使用 一般只有一个默认插槽 -->
      <template>
        <div>
          <h2>使用下默认插槽</h2>
        </div>
      </template>
      <!-- 命名插槽 -->
      <template slot="mySlot">
        <div>
          <h3>使用下具名插槽</h3>
        </div>
      </template>
    </Child>
    <hr/>
    <!-- 第二个Child组件 -->
    <Child>
     
      <template slot="mySlot">
        <div>
          <h3>使用下具名插槽</h3>
        </div>
      </template>
      <template slot="mySlot1">
        <div>
          <h1>使用下mySlot1具名插槽</h1>
        </div>
      </template>
    </Child>

    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>
    <!-- 作用域插槽 
        1.数据在父组件中，但在子组件中展示
        2.父传子  子props接收  v-for展示数据
        3.数据展示的html结构 由父组件决定
     -->
     <!-- 先将数据从父组件传递到子组件 -->
     <List :todos="todos">
       <!-- slot-scope就是作用域插槽   myScopeProps接收的是子组件回传过的对象  这里指的是接收子组件回传过来的一个个todo对象 -->
       <template slot-scope="myScopeProps">
         <!-- style样式动态绑定 -->
         <span :style="{color: myScopeProps.todo.isComplete?'green':'red'}">
           {{myScopeProps.todo.text}}
         </span>
       </template>
     </List>
    
    <hr>

    <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>

    <List :todos="todos">
        <!-- 这个是自己写的  相当于myScopeProps 接收的是todo的对象集合 同上 -->
        <!-- <template slot-scope="myScopeProps">
          <h2 :style="{color: myScopeProps.todo.isComplete?'blue':'green'}">
            {{myScopeProps.todo.id}} --- {{myScopeProps.todo.text}}
          </h2>
        </template> -->
        <!-- 这里相当于结构赋值 -->
        <template slot-scope="{todo,index}">
          <h2 :style="{color: todo.isComplete?'green':'blue'}">
              <span>{{index+1}}</span> --- {{todo.text}}
          </h2>
        </template>
    </List>
  </div>
</template>

<script type="text/ecmascript-6">
  import List from './List'
  import Child from './Child.vue'
  export default {
    name: 'ScopeSlotTest',
    data () {
      return {
        todos: [
          {id: 1, text: 'AAA', isComplete: false},
          {id: 2, text: 'BBB', isComplete: true},
          {id: 3, text: 'CCC', isComplete: false},
          {id: 4, text: 'DDD', isComplete: false},
        ]
      }
    },

    components: {
      List,
      Child
    }
  }
</script>
